import React from 'react';
import { LaptopOutlined, UserOutlined, AudioOutlined, FileTextOutlined } from '@ant-design/icons';
import { Layout, Menu, Button, Image, Row, Col, Card, Tabs } from 'antd';
import { useNavigate } from 'react-router-dom';

const { Header, Content, Sider } = Layout;
const { TabPane } = Tabs;

const items2 = [
  {
    icon: <UserOutlined />,
    label: "启动会议",
    key: 'startMeeting',
  },
  {
    icon: <LaptopOutlined />,
    label: "历史会议",
    key: 'historyMeeting',
  },
];

// 用户账户页面的路径
const userAccountPath = '/Userinf';
const historyMeetingPath = '/historyMeeting'; // 历史会议页面的路径

function DetailMeeting() {
  const navigate = useNavigate();

  const handleMenuClick = (e) => {
    if (e.key === 'startMeeting') {
      navigate('/svideo'); // 跳转到当前页面
    } else if (e.key === 'historyMeeting') {
      navigate(historyMeetingPath); // 跳转到历史会议页面
    }
  };

  return (
    <Layout style={{ height: '100vh', margin: 0 }}>
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          width: '100%',
          height: '64px',
          backgroundColor: 'white',
          borderBottom: '1px solid #e8e8e8',
        }}
      >
        <Image src='/logo.png' preview={false} style={{ width:'70px', marginLeft: '-50px', marginTop: '-10px'}} />
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Menu
            theme="light"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            items={[]}
            style={{ flex: 1, minWidth: 0 }}
          />
          <Button
            type="primary"
            shape="circle"
            icon={<UserOutlined style={{ fontSize: '20px' }} />}
            size="large"
            onClick={() => navigate(userAccountPath)}
            style={{ backgroundColor: 'blue', border: '1px solid #ccc' }}
          />
        </div>
      </Header>
      
      <Layout>
        <Sider
          width={200}
          style={{ background: '#fff', borderRight: '1px solid #e8e8e8' }}
        >
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            items={items2}
            onSelect={handleMenuClick}
            style={{ height: '100%', borderRight: 0 }}
          />
        </Sider>

        <Layout style={{ padding: 0 }}>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 'calc(100vh - 64px)',
              background: '#fff',
            }}
          >
            <Row gutter={24}>
              <Col span={14}>
                <Card
                  title="会议视频"
                  style={{ height: '100%' }}
                >
                  <div style={{ 
                    background: '#f0f0f0', 
                    height: '400px', 
                    display: 'flex', 
                    justifyContent: 'center', 
                    alignItems: 'center',
                    fontSize: '24px',
                    color: '#999'
                  }}>
                    视频会议区域
                  </div>
                </Card>
              </Col>
              <Col span={10}>
                <Card title="会议功能" style={{ height: '100%' }}>
                  <Tabs defaultActiveKey="1">
                    <TabPane
                      tab={
                        <span>
                          <AudioOutlined />
                          会议发言
                        </span>
                      }
                      key="1"
                    >
                      <div style={{ height: '400px', overflowY: 'auto' }}>
                        <p>这里显示会议发言内容...</p>
                      </div>
                    </TabPane>
                    <TabPane
                      tab={
                        <span>
                          <FileTextOutlined />
                          会议总结
                        </span>
                      }
                      key="2"
                    >
                      <div style={{ height: '400px', overflowY: 'auto' }}>
                        <p>这里显示会议总结内容...</p>
                      </div>
                    </TabPane>
                  </Tabs>
                </Card>
              </Col>
            </Row>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}

export default DetailMeeting;